<template>
    <div class="register-wrap" >
        
		<van-nav-bar
		  title=""
		  left-arrow
		  fixed
		  @click-left="onClickLeft"
		/>
        
        
        <div class="title" >
            手机号注册
        </div>
        
        <div class="login-box" >
            <div class="input-box" >
                <div class="input-box__label" >+86</div>
                <div class="input-box__input" >
                    <input v-model="mobile" type="number" placeholder="请输入手机号" >
                </div>
            </div>
            <div class="input-box" >
                <div class="input-box__input" >
                    <input v-model="password" type="password" placeholder="请输入密码" >
                </div>
            </div>
            <div class="input-box" >
                <div class="input-box__input" >
                    <input v-model="smsCode" type="text" placeholder="请输入验证码" >
                </div>
                <div 
                v-if="!count"
                 @click="handleToSend" 
                class="send-code active-btn" >
                获取验证码
                </div>
                <div v-else class="send-code" >
                    {{ count }}s
                </div>
            </div>
            <div class="input-box" >
                <div class="input-box__input" >
                    <input v-model="inviteCode"  type="text" placeholder="请输入邀请人手机号/邀请码(必填）" >
                </div>
            </div>
        </div>
        
        <!-- 操作 -->
        <div class="register-btn active-btn" @click="handleToRegister" >注册</div>
        <div class="gologin-btn active-btn" @click="handleToLogin" >已注册，去登录</div>
    </div>
</template>

<script>
    import { SEND_CODE, REGISTRE } from '@/api/cms';
    import { checkPhone } from '@/tool/methods';
    export default {
        data() {
            return {
                mobile: '',
                password: '',
                smsCode: '',
                inviteCode: '',
                // 验证码
                count: 0,
                //操作
                loadBtn: false
            }
        },
        mounted() {
            // const {
            //     inviteCode
            // } = this.$route.query.inviteCode;
            let inviteCode=this.$route.query.inviteCode
            if(!inviteCode){
                inviteCode = localStorage.getItem('invite_code') || '';
            }
            this.inviteCode = inviteCode || '';
        },
        methods: {
            onClickLeft() {
              // this.$router.replace({
              //     name: 'phoneLogin',
              //     query: {
              //         inviteCode: this.inviteCode
              //     }
              // })
			  this.$router.back()
            },
            /**
             * 注册
             */
            handleToRegister() {
                if(!this.mobile) {
                    this.$toast('请输入手机号')
                    return
                }
                if(!checkPhone(this.mobile)) {
                    this.$toast('手机号格式错误')
                    return 
                }
                if(!this.password.trim()) {
                    this.$toast('请输入密码')
                    return
                }
                if(!this.smsCode.trim()) {
                    this.$toast('请输入验证码')
                    return
                }
                if(!this.inviteCode.trim()) {
                    this.$toast('请输入邀请人手机号/邀请码')
                    return
                }
                
                // 阻断校验
                if (this.loadBtn) {
                  return;
                }
                // 锁住
                this.loadBtn = true;
                
                let params = {};
                    params['account'] = this.mobile;
                    params['password'] = this.password;
                    params['code'] = this.smsCode;
                    params['invite_code'] = this.inviteCode;
                    
                this.$http.post(REGISTRE, params)
                    .then(() => {
                        this.$toast.success('注册成功');
                        localStorage.removeItem('invite_code')
                        setTimeout(() => {
                          this.loadBtn = false;
                          // 去登录
                          this.$router.replace({
                              name: 'login'
                          })
                        }, 1000)
                        
                    })
                    .catch(() => {
                        this.loadBtn = false;
                    })
            },

             handleToLogin() {
                this.$router.replace({
                    name: 'login',
                })
            },
            
            /**
             * 点击获取验证码
             */
            handleToSend() {
              if(!this.mobile) {
                    this.$toast('请输入手机号')
                    return
              }
              
              if(!checkPhone(this.mobile)) {
                  this.$toast('手机号格式错误')
                  return 
              }
            
              // 开启倒计时
              this.sendCode()
            },
            sendCode() {
              if(this.count) {
                return
              }
            
              // 事件阻断
              if (this.loadBtn) {
                return
              }
              this.loadBtn = true
            
              let params = {};
                  params['account'] = this.mobile;
                  params['scene'] = 1;
              this.$http.post(SEND_CODE, params)
                .then(() => {
                  this.$toast.success('发送成功')
                  this.loadBtn = false
                  this.countDown()
                })
                .catch(() => {
                  this.loadBtn = false
                })
            },
            countDown() {
              this.count = 59;
              const count_down = (() => {
                if(this.count <= 0) {
                  return
                }
                setTimeout(() => {
                  --this.count
                  count_down()
                }, 1000)
              })
            
              count_down()
            },
            
        }
        
    }
</script>

<style lang="scss" >
    .register-wrap{
        min-height: 100vh;
        padding-top: 46px;
        background-color: #FFFFFF;
		box-sizing: border-box;
        .van-nav-bar .van-icon{
        	color: #333333;
        }
        .van-nav-bar__arrow{
        	font-size: 20px;
        }
        
        .van-hairline--bottom::after{
            border: none;
        }
        
        .title{
            padding-top: 1.38rem;
            margin-left: 0.64rem;
            font-size: 0.4rem;
            font-weight: 500;
            line-height: 0.56rem;
            color: #333333;
        }
        .login-box{
            width: 6.22rem;
            margin: auto;
            margin-top: 0.92rem;
            .input-box{
                display: flex;
                align-items: center;
                width: 100%;
                height: 1rem;
                padding: 0 0.32rem;
                margin-bottom: 0.32rem;
                border-radius: 0.16rem;
                box-sizing: border-box;
                background-color: #F4F4F4;
                &__label{
                    flex-shrink: 0;
                    position: relative;
                    font-size: 0.32rem;
                    font-weight: 400;
                    color: #333333;
                    &::after{
                        content: '';
                        width: 0.04rem;
                        height: 0.32rem;
                        margin-left: 0.14rem;
                        margin-right: 0.14rem;
                        border: 0.02rem solid #dadada;
                    }
                }
                &__input{
                    height: 100%;
                    flex: 1;
                    input{
                        display: flex;
                        align-items: center;
                        width: 100%;
                        height: 100%;
                        font-size: 0.32rem;
                        font-weight: 400;
                        border: none;
                        outline: none;
                        background-color: transparent;
                        &::-webkit-input-placeholder {
                            color: #999999 !important;
                        } 
                    }
                }
                .send-code{
                    display: flex;
                    align-items: center;
                    height: 100%;
                    flex-shrink: 0;
                    font-size: 0.28rem;
                    font-weight: 400;
                    margin-left: 0.2rem;
                    color: #666666;
                }
            }
        }
        .register-btn{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 6.22rem;
            height: 0.88rem;
            color: #ffffff;
            font-size: 0.32rem;
            font-weight: 500;
            margin: auto;
            margin-top: 1.04rem;
            border-radius: 0.44rem;
			background:linear-gradient( 136deg, #6EC069 0%, #42A633 100%);
        }

        .gologin-btn{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 6.22rem;
            height: 0.88rem;
            color: #ffffff;
            font-size: 0.32rem;
            font-weight: 500;
            margin: auto;
            margin-top: 0.5rem;
             border-radius: 0.44rem;
			background:linear-gradient( 136deg, #6EC069 0%, #42A633 100%);
        }
        
    }
</style>
